<template>
  <div class="bigbox animate__animated animate__fadeIn">
    <div class="userinfos">
      <!-- 头像区 -->
      <div class="photo">
        <img src="../../assets/头像.jpeg" alt="" :title="title_name" />
        <h2 style="line-height: 5;color:#fff;">尊敬的会员：<em><strong
              style="font-size:28px;">{{usr.msg.username}}</strong></em>，您好！</h2>
        <div class="user_msg">
          <ul @mouseenter="showfont" @mouseleave="hidefont">
            <li>
              <user theme="outline" size="24" fill="#333" />
              &#160
              <span>账户：{{usr.msg.username}}</span>
            </li>|
            <li>
              <wallet theme="outline" size="24" fill="#333" v-show="iconshowhide" />
              &#160
              <span v-show="fontshowhide">余额：{{usr.msg.money}}￥</span>
            </li>|
            <li>
              <cloudy theme="outline" size="24" fill="#333" v-show="iconshowhide" />
              &#160
              <span v-show="fontshowhide">积分：{{usr.msg.fraction}}</span>
            </li>|
            <li>
              <config theme="outline" size="24" fill="#333" v-show="iconshowhide" />
              &#160
              <el-dropdown>
                <span v-show="fontshowhide">下拉菜单</span>
                <template v-slot:dropdown>
                  <el-dropdown-menu @mouseenter="showfont" @mouseleave="hidefont">
                    <el-dropdown-item style="font-size:16px;" @click="showUpUser">修改个人信息</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
      <div class="white_note"></div>
      <!-- 导航 -->
      <div class="userinfo_navigation">
        <el-menu mode="horizontal" :default-active="user_router" class="el-menu-vertical-demo"
          background-color="#F2F6FC" router>
          <el-menu-item index="/index/userinfo/basicInformation">
            <span>乘机人员</span>
          </el-menu-item>
          <el-menu-item index="/index/userinfo/myorders">
            <span>全部订单</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!--内容-->

      <div class="userinfo_content" v-loading="loading">
        <router-view />
      </div>
    </div>
    <div style="width: 100%; height: 120px;">
    </div>

    <!-- 修改密码弹窗 -->
    <transition mode="out-in" enter-active-class="animate__animated animate__backInRight"
      leave-active-class="animate__animated animate__backOutRight">
      <div class="showUpUser" v-show="showUser">
        <div class="peopleBox">
          <div class="BoxTop" style="margin-top: 20px;">
            <span @click="hideUpUser">
              <img style="margin-top: -16px;" src="../../assets/关闭2.png" alt="关闭" title="关闭窗口">
            </span>
          </div>
          <div class="BoxBody">
            <p style="margin:20px;">修改密码</p>
            <div class="UserMsg">
              账户名：
              <el-input placeholder="暂无用户" v-model="name" :disabled="true" class="BoxInput">
              </el-input>
            </div>
            <div class="UserMsg">
              <span>旧密码：</span>
              <el-input placeholder="请输入旧密码以确定" v-model="Pwd.oldPwd" show-password clearable ref="ainput"
                class="BoxInput">
              </el-input>
            </div>
            <div class="UserMsg">
              <span>新密码：</span>
              <el-input placeholder="请输入新密码以修改" v-model="Pwd.newPwd" show-password clearable class="BoxInput">
              </el-input>
            </div>
            <div class="UserMsg">
              <el-button type="primary" plain style="width:200px;height:40px; margin-left: 30px;" @click="confimUp"
                :loading="load">确认修改
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script setup>
import { ref, reactive,getCurrentInstance, onMounted,provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import { RightUser } from "@icon-park/vue-next";
import { User, Wallet, Config, Cloudy } from "@icon-park/vue-next";
import url from "../../common/js/APIUtil";
import { ElMessage } from 'element-plus'
//呢称
const title_name = sessionStorage.getItem("username");
const router = useRouter();
const user_router = ref(router.currentRoute._value.fullPath)
let usr=reactive({
  msg:[]
})
let data=reactive({
  people:[]
})
const { proxy } = getCurrentInstance();
let loading = ref(true)
proxy.$http({
  method:"get",
  url:url.API_GET_USER+sessionStorage.getItem("id"),
}).then((res)=>{
  loading.value=false
  usr.msg=res.data
  data.people=res.data.people
  name.value=res.data.username
})
provide("people",data)

let fontshowhide=ref(false)
let iconshowhide=ref(true)
let showfont=()=>{
    fontshowhide.value=true
    iconshowhide.value=false
}
let hidefont=()=>{
    fontshowhide.value=false
    iconshowhide.value=true
}

let showUser=ref(false)
// 显示修改用户文本框
let showUpUser=()=>{
    showUser.value=true
}

let hideUpUser=()=>{
  // 隐藏修改用户文本框
  showUser.value=false
}
let People=reactive({
  peopleName:"",
  carId:"",
  radio1:"男",
  phone:""
})
let load=ref(false)
let name=ref()
let Pwd=reactive({
  oldPwd:"",
  newPwd:""
})
let newPwd=ref()

let confimUp=()=>{
  if(Pwd.oldPwd==""||Pwd.newPwd=="")
  {
    ElMessage.warning("密码不能为空...")
    return
  }
  if(Pwd.newPwd.length<6)
  {
    ElMessage.warning("密码长度不能小于6位...")
    return
  }
  proxy.$confirm('确认要修改该条数据吗？', '提示', { type: 'warning' }).then(() => {
    load.value=true
    proxy.$http({
        method:"post",
        url:url.API_GET_USER,
        data:{
          id:sessionStorage.getItem("id"),
          oldPwd:Pwd.oldPwd,
          newPwd:Pwd.newPwd
        }
      }).then((res)=>{
          const data=res.data
          if(data){
            load.value=false
            ElMessage.success("修改成功")
            showUser.value=false
            Pwd.oldPwd=""
            Pwd.newPwd=""
          }
          else
          {
            ElMessage.warning("请检查你的旧密码是否正确或新密码格式是否正确...")
          }
        }
      )

  }).catch(() => {});
}


</script>

<style lang="less" scoped>




hr.style-one {
  width: 100%;
  margin: 0 auto;
  border: 0;
  height: 4px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
}
.userinfos {
  width: 95%;
  height: 95%;
  margin: auto;
  border-radius: 20px 0px 0px 20px;
  box-shadow: var(--el-box-shadow);
  transform: translate(1%, 5%);
}
.white_note{
  width: 100%;
  height: 1%;
}
/* 导航 */
.userinfo_navigation {
  width: 100%;
  height: 2.3%;
  background-color: #f2f6fc;
  
}
/* 内容 */
.userinfo_content {
  // float: right;
  margin: auto;
  width: 100%;
  height: 70%;
  background-color: #f2f6fc;
  /* box-shadow: var(--el-box-shadow-lighter); */
  // border-bottom-right-radius: 10px;
  // border-bottom-left-radius: 10px;
  transform: translate(0%, 5.3%);
}
/* 头像 */
.photo {
  width: 100%;
  height: 23%;
  /* margin-top: 1.5%; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  /* background-color:   rgb(10,22,46); */
  background-image: linear-gradient(to right ,  #b1b3b8,#606266,#303133);
  position: relative;
}
.photo img {
  width: 110px;
  height: 110px;
  margin-left: 1.2%;
  margin-top: 0.5%;
}

.user_msg{
  width: 100%;
  height: 50px;
  background-color: #fff;
  bottom: 0;
  position: absolute;
  margin: auto;
}

.user_msg ul{
  /* width: 100%; */
  display: flex;
  line-height: 3;
  justify-content: space-around;
  font-weight: bold;
  cursor:default;
  list-style:none;
  margin: auto;
}

.title_name {
  margin-left: 13%;
  margin-top: -3.5%;
  font-size: 22px;
  position: absolute;
}
// ----- //
:deep(.el-menu) {
    --el-menu-active-color: var(--el-color-primary);
    --el-menu-text-color: var(--el-text-color-primary);
    --el-menu-hover-text-color: var(--el-text-color-primary);
    --el-menu-bg-color: var(--el-fill-color-blank);
    --el-menu-hover-bg-color: var(--el-color-primary-light-9);
    --el-menu-item-height: 56px;
    --el-menu-item-font-size: var(--el-font-size-base);
    --el-menu-item-hover-fill: var(--el-color-primary-light-9);
    --el-menu-border-color: var(--el-border-color);
    border-right: solid 0px var(--el-menu-border-color);
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: var(--el-menu-bg-color);
    box-sizing: border-box;
    transform: translate(0%, 0%);
}
 :deep(.el-menu-item){
    height: 44px;
    width: 50%;
    font-size: 18px;
    // padding: 13px 20px;
    text-align: center;
    font-weight:bolder;
}
ul li{
  width: 100%;
  height: 100%;
  text-align: center;
}
ul li:hover{
  background-color: #dddddf;
  transition: 0.5s;
}
.el-dropdown{
  color: #000;
  font-size: 16px;
  line-height: 3 ;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.bigbox{
  width: 100%;
  height: 830px;
  position: relative;
  z-index: 999;
  margin: auto;
}

.showUpUser{
  position: absolute;
  width: 100%;
  height: 900px;
  // background: rgba(0, 0, 0, 0.3);
  /* 模糊大小就是靠的blur这个函数中的数值大小 */
  // backdrop-filter: blur(20px);
  z-index: 999;
  top: -20%;
  left:-5%;
}
.peopleBox{
  width: 800px;
  height: 400px;
  box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.1) ;
  background: rgb(255, 255, 255);
  position: absolute;
  top: 397px;
  left: 30%;
  border-radius: 10px;
}
.BoxTop{
  width: 100%;
  height: 1%;
  font-size: 30px;
  font-weight: bold;
  position: relative;
}
.BoxTop img{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
.BoxBody{
  width: 100%;
  height: 90%;
  // background-color: #ebecee;
  font-weight: bold;
  font-size: 22px;
  text-align: center;

}
.BoxInput{
  width: 250px;
  height: 40px;
  font-size: 18px;
}
.UserMsg{
  margin-top: 30px;
}

</style>
